Doing more with {LESS}
I am always looking for tools that could make my work more effective. Even though CSS is a pretty straightforward yet powerful language, writing thousands of lines of code can get tiring sometimes. Fortunately I am not the only one who has such feelings.
Alexis Sellier has developed a dynamic stylesheet language called LESS which extends CSS with dynamic behavior such as variables, mixins, nesting, operations and functions. I am really proud and happy that Jakub Oczko and his team integrated LESS into Kentico CMS. This is something Web Designers and Web Developers using Kentico CMS should celebrate. In honor of this occasion I would like to provide you with a little insight as to how LESS works.
As Jakub describes in his blog post, LESS is integrated into Kentico CMS as a module released in the marketplace. He also provides an instruction document containing information on how to install the LESS module and how to create your first LESS stylesheet in Kentico CMS. My intention is to teach you the basics of the LESS dynamic stylesheet language and provide resources for further reading.
In fact, LESS is CSS precompiler written in JavaScript running on either the client-side or server-side. To install the LESS stylesheets module into Kentico CMS, download the module and follow the instructions. I prepared an example page which uses a LESS stylesheet. Expand the source to display the LESS code of the example page which is compiled into CSS. It looks pretty scary and complex—but don't worry, I'll explain.
/*# 01 - Variables #*/
@white: #fff;
@black: #000;
@green: #95ba11;
@size: 10px;
/*# 02 - Mixins #*/
.font(@font-size: (@size * 1.6), @thickness: 400, @family: "Roboto", @line-height: (@size * 2)){
font-size: @font-size;
font-weight: @thickness;
font-family: @family;
line-height: @line-height;
}
/*# 03 - Layout #*/
body{
.font;
text-align: center;
header, article, footer{
.wrapper{
max-width: (@size * 94);
margin: 0 auto;
text-align: left;
padding: 0 @size;
}
}
header{
border-bottom: 1px lighten(@black, 80%) solid;
nav{
padding: (@size * 6) @size (@size * 5) !important;
li{
border-bottom: 3px @white solid;
display: inline-block;
margin: 0 (@size * 1.5);
&:hover{
border-bottom: 3px @green solid;
}
&:first-child{
margin: 0 (@size * 1.5) 0 0;
}
&:last-child{
margin: 0 0 0 (@size * 1.5);
}
&:only-child{
margin: 0;
}
a{
color: lighten(@black, 40%);
text-decoration: none;
font-weight: 300;
display: inline-block;
padding: (@size / 2) 0;
&:hover{
color: @black;
}
}
}
}
}
article{
background: lighten(@black, 98%);
border-top: 1px lighten(@black, 94%) solid;
padding-bottom: @size * 4;
h1{
.font((@size * 3), 700, "Roboto", (@size * 3));
padding: (@size * 4) 0 @size 0;
}
h2{
.font((@size * 2.5), 700, "Roboto", (@size * 2.5));
padding: (@size * 3) 0 @size 0;
}
p{
.font((@size * 1.4), 300, "Roboto", (@size * 2));
color: lighten(@black, 40%);
padding: 0 0 (@size * 2);
}
img{
max-width: unit((@size * 10), ~"%");
}
}
footer{
background: hardlight(@green, lighten(@black, 5%));
padding: (@size * 2) @size;
p{
color: lighten(@black, 70%);
.font((@size * 1.2), 300, "Roboto", (@size * 2));
}
}
}
Variables
If you look at the “01 - Variables” section in the LESS stylesheet above, you can find the definition of four variables. The purpose of LESS variables is to set frequently used values which you can re-use and change in the global scope.
/* LESS: */
@green: #95ba11;
@size: 10px;
.example{
border: @size @green solid;
}
/* CSS Output: */:
.example{
border: 10px #95ba11 solid;
}
Mixins
“02 - Mixins” section contains the “.font” mixin definition. Mixins look like CSS classes but you can encapsulate CSS properties within the mixin and use it as a property of another CSS selector definition. Mixins can also be parameterized just like functions.
/* LESS: */
.font(@font-size: 16px, @line-height: 20px){
font-size: @font-size;
line-height: @line-height;
}
body{
.font;
}
body{
.font(12px, 18px);
}
/* CSS Output: */
body{
font-size: 16px;
line-height: 20px;
}
body{
font-size: 12px;
line-height: 18px;
}
Nesting
In the “03 – Layout” you can find a lot of examples of LESS usage. One of these examples is nesting which specifies selector inheritance and helps you to structure your code. Nesting also covers pseudo-classes.
/* LESS: */
li{
a{
color: #000;
&:hover{
color: #555;
}
}
}
/* CSS Output: */
li a{
color: #000;
}
li a:hover{
color: #555;
}
Functions
Maybe you have noticed I use something like “lighten(#000, 40%)” in the LESS stylesheet. LESS allows you to use a bunch of built-in functions which transform colors, manipulate strings and do math. Look at the Function Reference.
/* LESS: */
a{
color: lighten(#000, 40%);
}
/* CSS Output: */
a{
color: #666666;
}
Operations
LESS allows you to do simple math with property values and colors. You can add, subtract, multiply and divide—helpful and straightforward when operating with variables.
/* LESS: */
@size: 10px;
a{
padding: (@size / 2) 0;
}
/* CSS Output: */
a{
padding: 5px 0;
}
Advanced features
I have defined the basics of LESS above, but this dynamic stylesheet language allows you to do more advanced operations like nesting media queries, using JavaScript or interpolating selectors.
/* LESS: */
@str: red-color;
@height-str: `document.body.clientHeight`; /* JavaScript Evaluation */
.@{str}{ /* Interpolated Selector */
color: red;
}
html{
height: unit(@height-str, px); /* Using resolved height in pixels */
}
/* CSS Output: */
.red-color{ /* Class name is resolved User name */
color: red;
}
html{
height: 980px;
}
For further reading visit lesscss.org
Putting all together
If you read this blog post and the suggested further reading carefully, you can clearly understand the complex LESS stylesheet I presented at the top of this blog post. The beauty of LESS is in combining variables, mixins, nesting, functions, operations and advanced features. Enjoy LESS within Kentico CMS!